<template>
	<view class="container">
		<view class="content">
			<view class="title">
				请选择卡片类别:
			</view>
			<view class="radio">
				<radio-group name="value" @change="onSelectChange">
					<label>
						<radio value="1" /><text><text class="iconfont icon-yinhangka1"></text> 银行卡</text>
					</label>
					<label>
						<radio value="2" /><text><text class="iconfont icon-zhifubao"></text> 支付宝</text>
					</label>
					<label>
						<radio value="3" /><text><text class="iconfont icon-weixin"></text> 微信</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="content0">
			<view class="last">
				<view class="title">
					账户名:
				</view>
				<view class="input">
					<input type="text" v-model="cardItem.name" placeholder="请输入账户名" placeholder-class="inputPlace" />
				</view>
			</view>
			<view class="last">
				<view class="title">
					账号:
				</view>
				<view class="input">
					<input type="text" v-model="cardItem.account" placeholder="请输入账号" placeholder-class="inputPlace" />
				</view>
			</view>
			<view class="last" v-if="cardItem.type == 1">
				<view class="title">
					开户行:
				</view>
				<view class="input">
					<input type="text" v-model="cardItem.bankCardName" placeholder="请输入开户行" placeholder-class="inputPlace" />
				</view>
			</view>
		</view>
		<view class="content1">
			<button type="primary" @tap.stop="addCard">添加</button>
		</view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default {
		data(){
			return {
				cardItem:{
					type: 0,
					account: '',
					name: '',
					bankCardName: '',
					wallet_type: 0
				}
			}
		},
		methods:{
			onSelectChange(e){
				this.cardItem.type = e.detail.value;
			},
			async addCard(){
				if(this.cardItem.type == 0){
					this.showToast('请选择卡片类别');
					return
				}
				if(this.cardItem.name.length < 2){
					this.showToast('请输入合法的账户名');
					return
				}
				if(this.cardItem.account.length < 8){
					this.showToast('请输入合法的账号');
					return
				}
				if(this.cardItem.type == 1){
					if(this.cardItem.bankCardName.length<4){
						this.showToast('请输入合法的开户行名称');
						return
					}
				}
				let userinfo = uni.getStorageSync('userInfos');
				this.cardItem.user_id = userinfo._id;
				let res = await api.uniCloudApi(api.publicFun.wallet,this.cardItem);
				if(res.id){
					this.showToast('添加成功');
					setTimeout(() => {
						uni.navigateBack({})
					},1000)
				}else {
					this.showToast(res.msg)
				}
			},
			showToast(msg){
				uni.showToast({
					icon:'none',
					title:msg
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fffaeb;
	}
	.container{
		padding: 20rpx 0;
	}
	.content{
		background-color: #FFFFFF;
		width: calc(90% - 120rpx);
		margin-left: 5%;
		padding: 20rpx 60rpx;
		border-radius: 60rpx;
		.title{
			line-height: 70rpx;
			height: 70rpx;
			font-size: 30rpx;
			color: $uni-back-color;
			text-decoration: underline;
		}
		label{
			display: block;
			line-height: 120rpx;
			height: 120rpx;
			text{
				height: 120rpx;
				line-height: 120rpx;
				.icon-zhifubao{
					font-size: 60rpx;
					color: #0000FF;
				}
				.icon-weixin{
					font-size: 50rpx;
					color: #00B26A;
				}
				.icon-yinhangka1{
					font-size: 50rpx;
					color: #dcef7d;
				}
			}
		}
	}
	.content1{;
		width: calc(90%);
		margin-left: 5%;
		margin-top: 80rpx;
		button{
			width: 70%;
			margin-left: 15%;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			background-color: $uni-back-color;
		}
	}
	.content0{
		background-color: #FFFFFF;
		border-radius: 40rpx;
		padding: 20rpx 60rpx;
		width: calc(90% - 120rpx);
		margin-left: 5%;
		margin-top: 80rpx;
		.last{
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			.title{
				width: 23%;
				text-align: justify;
				text-align-last: justify;
			}
			.input{
				width: 77%;
			}
			view{
				height: 80rpx;
				line-height: 80rpx;
				input{
					margin-left: 10%;
					border-bottom: 1px solid #cacaca;
					height: 70rpx;
					margin-top: 10rpx;
					width: 90%;
				}
				.inputPlace{
					font-size: 24rpx;
				}
			}
		}
	}
</style>
